﻿<html>
<head>
<meta charset="utf-8">

<style type="text/css">
.p {
  position: absolute;
  width: 100px;
  height: 100px;
  color: inherit;
  background-color: currentColor;
  border-radius: 50%;
  border: 1px solid currentColor;
  -webkit-animation: blast 3s infinite ease-in;
          animation: blast 3s infinite ease-in;
}

.p1 {
  -webkit-animation-delay: -5;
          animation-delay: -5;
}

.p2 {
  -webkit-animation-delay: -5.5s;
          animation-delay: -5.5s;
}

.p3 {
  -webkit-animation-delay: -6s;
          animation-delay: -6s;
}

.p4 {
  -webkit-animation-delay: -6.5s;
          animation-delay: -6.5s;
}

.p5 {
  -webkit-animation-delay: -7s;
          animation-delay: -7s;
}

.p6 {
  -webkit-animation-delay: -7.5s;
          animation-delay: -7.5s;
}

body {
  background-color: black;
  /*   filter: blur(1px); */
  -webkit-animation: color 20s infinite;
          animation: color 20s infinite;
}

@-webkit-keyframes color {
  0% {
    color: red;
  }
  33% {
    color: green;
  }
  66% {
    color: blue;
  }
  100% {
    color: red;
  }
}

@keyframes color {
  0% {
    color: red;
  }
  33% {
    color: green;
  }
  66% {
    color: blue;
  }
  100% {
    color: red;
  }
}
@-webkit-keyframes blast {
  from {
    transform: scale(0);
    opacity: 1;
  }
  to {
    transform: scale(1);
    opacity: 0;
  }
}
@keyframes blast {
  from {
    transform: scale(0);
    opacity: 1;
  }
  to {
    transform: scale(1);
    opacity: 0;
  }
}
</style>
    	
</head>
<body>

<div></div>

<script type="text/javascript">
var final = "";
var vh = window.innerHeight;
var vw = window.innerWidth;
var count = 12;

function a(x) {
  var s = '<div class="p p' + x + '"   style="';
  var s3 = "></div>";
  for (var i = 0; i < count; i++) {
    var h = Math.random() * 300;
    var s2 = "width:" + h + "px;height:" + h + "px;";

    var x = Math.random() * (vw - h);
    var y = Math.random() * (vh - h);
    var blur = Math.random() * 30;
    var pos = "left:" + x + "px;top:" + y + "px;filter: blur(" + blur + 'px)"';
    final += s + s2 + pos + s3;

  }
}

a(1);
a(2);
a(3);
a(4);
a(5);
a(6);
document.getElementsByTagName('body')[0].innerHTML = final;
</script>

</body>
</html>
